import React, { Component } from 'react';
import { Button, Spin, Modal } from 'antd';
import { WeaTop, WeaTab, WeaRightMenu } from 'ecCom';
import CarConstant from '../../util/CarConstant';
import { WeaTableNew } from 'comsMobx';

const WeaTable = WeaTableNew.WeaTable;
import { inject, observer } from 'mobx-react';
import NoRight from '../NoRight';
import CarTypeDialog from '../car/dialog/CarTypeDialog.js';
import { WeaLocaleProvider } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;
@inject('carTypeStore')
@observer
export default class CarType extends Component {
  constructor(props) {
    super(props);
    this.state = { isRight: 2 };
    this.setIsRight = this.setIsRight.bind(this);
    this.add = this.add.bind(this);
    this.onOperatesClick = this.onOperatesClick.bind(this);
    this.onRightMenuClick = this.onRightMenuClick.bind(this);
  }
  setIsRight(isRight) {
    this.setState({ isRight });
  }
  // 右键菜单
  getRightMenu() {
    const btns = [];
    btns.push({ key: 'add', icon: <i className="icon-coms-New-Flow" />, content: getLabel(82, '新建') });
    return btns;
  }

  // 鼠标右键点击事件
  onRightMenuClick(key) {
    if (key == 'add') {
      this.add();
    }
  }

  componentDidMount() {
    const { carTypeStore } = this.props;
    carTypeStore.doTableLoading({}, this.setIsRight);
  }

  add() {
    this.refs.carType.wrappedInstance.add();
  }

  onOperatesClick(record, index, operate, flag) {
    const { carTypeStore } = this.props;
    if (flag === '0') { // 编辑
      carTypeStore.appendFormFields({ id: record.id, name: record.name, usefee: record.usefee, description: record.description });
      this.refs.carType.wrappedInstance.edit();
    } else if (flag === '1') { // 删除
      Modal.confirm({
        title: `${getLabel(385843, '确认要删除车辆类型')}[${record.name}]？`,
        onOk() {
          carTypeStore.deleteCarType({ id: record.id });
        },
        onCancel() {},
      });
    }
  }

  render() {
    const { carTypeStore } = this.props;
    const { loading, sessionkey, tableStore, topTab } = carTypeStore;

    if (this.state.isRight == 1) {
      return (<div>
        <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@8hxk1g`} spinning={loading} >
          <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@om30ja`} datas={this.getRightMenu()} onClick={this.onRightMenuClick} >
            <WeaTop
              ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@vc0s5g`}
              title={getLabel(17630, '车辆类型')}
              loading
              icon={CarConstant.icon}
              iconBgcolor={CarConstant.iconBgColor}
              showDropIcon
              dropMenuDatas={this.getRightMenu()}
              onDropMenuClick={this.onRightMenuClick}
              buttons={[
                (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@onud32@add`} type="primary" onClick={this.add}>{getLabel(82, '新建')}</Button>),
              ]}
            >
              <WeaTab
                ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@82sj2t`}
                datas={topTab}
                keyParam="groupid"
                searchType={['base']}
                onSearch={(v) => { carTypeStore.doTableLoading({ searchName: v }, this.setIsRight); }}
              />

              <WeaTable
                ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@dww7ho`}
                loading={loading}
                sessionkey={sessionkey}
                comsWeaTableStore={tableStore}
                hasOrder
                needScroll={false}
                onOperatesClick={this.onOperatesClick}
              />
            </WeaTop>
          </WeaRightMenu>
        </Spin>
        <CarTypeDialog ecId={`${this && this.props && this.props.ecId || ''}_CarTypeDialog@9jrl4a`} ref="carType" />
      </div>);
    } else if (this.state.isRight == 0) {
      return <NoRight ecId={`${this && this.props && this.props.ecId || ''}_NoRight@aasq0o`} visible />;
    }
    return <div />;
  }
}
